<template>
	<view class="c-text-inside" @click="$emit('click',$event)" :class="ggclass"
		:style="{color:colors,fontSize:fontSizes,width,maxWidth,fontWeight,'-webkit-line-clamp':row}">
		<slot>{{content}}</slot>
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'c-text',
		props: {
			ggclass: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: ''
			},
			fontSize: {
				type: String,
				default: '28rpx'
			},
			row: {
				type: [Number, String],
				default: ''
			},
			width: {
				type: String,
				default: ''
			},
			maxWidth: {
				type: String,
				default: '100%'
			},
			fontWeight: {
				type: [String],
				default: ''
			},
			content: {
				type: [String, Number],
				default: ''
			}
		},
		computed: {
			...mapState(['pattern', 'aplicationSetting']),
			lanIndex() {
				return this.aplicationSetting?.languageIndex || 0
			},
			fontSizes() {
				let num = parseInt(this.fontSize)
				// 判断除了中文 其他语言小两号字体
				if (this.lanIndex) {
					num -= 2 * 2
				}
				return `${num}rpx`
			},
			colors() {
				if (this.color) return this.$color[this.color] || this.color
				return this.$color.theme.textColor
			}
		}
	}
</script>

<style scoped>
	.c-text-inside {
		word-break: break-all;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
</style>